<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>11-简单的todo列表</title>
</head>
<body>
  <div id="todo-list-example">
    <form action="" v-on:sbumit.prevent='addNewTodo'>
      <label for="new-todo">Add a todo</label>
      <input type="text"
        v-model='newTodoText'
        id='new-todo'
        placeholder="这是一个默认的placeholder"
      >
      <button>Add</button>
    </form>
    <ul>
      <li
        is='todo-item'
        v-for='(todo,index) in todos'
        :key='todo.id'
        :title='todo.title'
        v-on:remove='todos.splice(index,1)'
      ></li>
    </ul>
  </div>
</body>
<script src="./vue1111.js"></script>
<script>
  Vue.component('todo-item',{
    template:`
     <li>
      {{ title }}
      <button @click='$emit(\"remove\")'>Remove</button>
     </li>
    `,
    props: ['title'],
  });

  new Vue({
    el:'#todo-list-example',
    data:{
      newTodoText:'',
      todos:[
      {
        id: 1,
        title: 'Do the dishes',
      },
      {
        id: 2,
        title: 'Take out the trash',
      },
      {
        id: 3,
        title: 'Mow the lawn'
      }
      ],
      nextTodoId: 4
    },
    methods:{
      addNewTodo(){
        this.todos.push({
          id: this.nextTodoId++,
          title: this.newTodoText
        })
        this.newTodoText = ''
      }
    }
  })
</script>
</html>